<template>
  <view class="wrap">
    <up-popup :show="show" @close="close" @open="open">
      <view class="user_box">
        <view class="title flex_c">
          <view class="logo_box">
            <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
              <view class="avatar_box">
                <image
                  class="avtar_class"
                  :src="userinfo.headimg"
                  v-if="userinfo.headimg"
                  mode="aspectFill"
                ></image>
                <image
                  class="avatar"
                  src="@/static/image/defaultAvatar.png"
                  v-else
                ></image>
              </view>
            </button>
          </view>
        </view>
        <view class="sub_title"> 欢迎加入周泰通 </view>
        <view class="sub_title gray"> 获取您额昵称、头像 </view>
        <view class="form_box">
          <view class="form_item flex_s">
            <view class="left"> 昵称 </view>
            <view class="right">
              <view @touchstart="handleTouchInput">
                <input
                  type="nickname"
                  class="form_input"
                  placeholder="请输入昵称"
                  v-model="userinfo.nickname"
                  :focus="foucs"
                  @blur="foucs = false"
                  name="nickname"
                />
              </view>
            </view>
          </view>
          <view class="form_item flex_s">
            <view class="left"> 手机号 </view>
            <view class="right">
              <input
                disabled
                class="form_input w50"
                placeholder="请点击获取"
                v-model="userinfo.phone"
                name="nickname"
              />
              <button
                class="speed_get"
                open-type="getPhoneNumber"
                @getphonenumber="getPhoneNumber"
              >
                快速获取
              </button>
            </view>
          </view>
        </view>
        <view class="btn_box">
          <view class="btn allow" @click="confirm"> 快速授权 </view>
          <view class="btn no_allow" @click="close"> 暂时跳过 </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { uploadImgs, Tips } from "@/utils";
import {  getMobile } from "@/api/public";
import { setUser } from "@/api/user";
import { getUser } from "@/api/user";
let foucs = ref(false);

// 特殊情况：当用户第一次点击获取昵称输入框时，不会唤起隐私指引弹窗，所以需要手动调用隐私协议弹窗
function handleTouchInput() {
  wx.getPrivacySetting({
    success(res: any) {
      if (res.needAuthorization && wx.requirePrivacyAuthorize) {
        wx.requirePrivacyAuthorize({
          success: (res: any) => {
            console.log("用户同意了隐私协议 或 无需用户同意隐私协议");
            // 用户同意隐私协议后给昵称input聚焦
            foucs.value = true;
          },
          fail: (res: any) => {
            console.log("用户拒绝了隐私协议");
          },
        });
      }
    },
  });
}
const show = ref(false);
const props = defineProps();

function getUserInfo() {
  getUser().then((res: any) => {
    userinfo = Object.assign(userinfo, res.data.user);
  });
}
let userinfo = reactive({
  nickname: "",
  headimg: "",
  phone: "",
});
function open() {
  show.value = true;
}
function close() {
  show.value = false;
}
function onChooseAvatar(e: any) {
  // 获取授权头像
  let url = e.detail.avatarUrl;
  uploadImgs(
    "/yhj/api.util/upload",
    url,
    (res: any) => {
      userinfo.headimg = res.data.url;
    },
    (err: any) => {
      Tips({ title: err.msg });
    }
  );
}
function getPhoneNumber(e: any) {
  //获取手机号
  if (e.detail.errMsg == "getPhoneNumber:ok") {
    bindPhone(e.detail);
  }
}
async function bindPhone(res: any) {
  //此乃绑定手机号
  getMobile({
    encryptedData: res.encryptedData,
    iv: res.iv,
    // code: res.code,
  }).then((res: any) => {
    const data = res.data;
    userinfo.phone = data.phone;
  });
}
const sendUserInfo = defineEmits(["confirm"]);

async function confirm() {
  if (!userinfo.phone) return Tips({title:"请填写手机号"});
  const userData = await setUser(userinfo);
  if (userData.data.phone) uni.setStorageSync("phone", userData.data.phone);
  sendUserInfo("confirm");
  close();
}
defineExpose({ close, open, getUserInfo });
</script>

<style scoped lang="scss">
.wrap {
  .user_box {
    color: #1c1c1c;
    width: 750rpx;
    // height: 781rpx;
    padding: 48rpx 48rpx 20rpx;

    .title {
      font-size: 30rpx;
      font-weight: 700;
      margin-bottom: 45rpx;

      .logo_box {
        width: 156rpx;
        height: 156rpx;

        margin-right: 10rpx;

        .avatar_box {
          width: 156rpx;
          height: 156rpx;
          border-radius: 50%;
          overflow: hidden;
          background: #cccccc;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .sub_title {
      font-size: 30rpx;
      margin-bottom: 20rpx;
      text-align: center;
      color: #333333;
    }

    .sub_title.gray {
      color: #878f8c;
      margin-bottom: 30rpx;
    }

    .form_box {
      margin-bottom: 126rpx;

      .form_item {
        height: 117rpx;
        border-bottom: 2rpx solid #e5e5e5;

        .left {
          width: 150rpx;
          margin-right: 40rpx;
          font-size: 30rpx;
        }

        .right {
          flex: 1;
          position: relative;

          .w50 {
            width: 50%;
          }

          .speed_get {
            position: absolute;
            font-size: 30rpx;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            color: var(--view-theme);
          }
        }
      }
    }

    .btn_box {
      .btn {
        width: 663rpx;
        height: 86rpx;
        line-height: 86rpx;
        text-align: center;
        margin: 0 auto;
        border-radius: 20rpx;
        overflow: hidden;
        font-size: 30rpx;
      }

      .allow {
        border-radius: 99rpx;
        background: var(--view-theme);
        color: #fff;
      }

      .no_allow {
        color: #333333;
      }
    }
  }
}
</style>